<template>
  <div class="qzgu">
     <div class="register">
        <div class="content">
            <p class="question"></p>
            <div class="logo">
                <h1><a href="/index" title="小米官网" target="_blank">小米官网</a></h1>
            </div>
            <h1 class="mi">注册小米账号</h1>
            <!-- 表单部分 -->
            <form action="" class="form_im" id="check">
                <h4> 
                    <strong></strong>
                    <input type="username" name="username" placeholder="请输入用户名" required="required" class="wenben1"
                        id="text" v-model="puusetyt.username">
                        <br>
                </h4>
                <h4>
                    <i></i>
                    <input type="password" name="password" placeholder="请输入密码" class="wenben2" required="required"
                        minlength="6" id="password" v-model="puusetyt.parssword"><br>
                </h4>
                <h4>
                    <em></em>
                    <input type="password" name="confirmPassword" placeholder="再次确认密码" class="wenben3" minlength="6"
                        required="required" id="confirmPassword" v-model="puusetyt.parssttt"><br>
                </h4>
                <button class="log_in" @click="zc">立即注册</button>
                <span id="tishi"></span>
            </form>
            <div class="read">
                <a href=""> 已阅读并同意： 小米 <strong class="strong1"> 用户协议 </strong> 和 <strong class="strong2"> 隐私政策
                    </strong></a>
            </div>
            <!-- 尾部备注制作 -->
            <div class="footer">
                <div class="footer_top">
                    <a href="" class="style_black">简体</a>5
                    <span>|</span>
                    <a href="" class="gray">繁体</a>
                    <span>|</span>
                    <a href="" class="gray"> English </a>
                    <span>|</span>
                    <a href="" class="gray">常见问题</a>
                </div>
                <div class="footer_bottom">
                    <p>小米公司版权所有-京ICP备10046444-</p>
                    <a href=""><img src="./image/ghs.png" alt="">
                    
                        京公网安备11010802020134号-京ICP证110507号</a>
                </div>
            </div>
        </div>
    </div>
  </div>
</template>

<script>

import './css/base.css'
import './css/register.css'

export default {
    data(){
      return{
        puusetyt:{
            username:'',
            parssword:'',
            parssttt:''
           
      },
        
     }
    },
    methods:{
       async zc(){
        const {data:res}=await this.$http.post('/register',this.puusetyt)

            if(this.puusetyt.parssttt!==this.puusetyt.parssword||res.meta.status!=201){
                this.$message.error('添加用户失败')
                
            }else{
                this.$message.success('添加用户成功')
                this.puusetyt.username=''
                this.puusetyt.parssword=''
                this.puusetyt.parssttt=''
                 this.$router.push("/login");
            }
               
       }
       
    }
}   
</script>
   
<style lang="less" scoped>
 .qzgu {
     display: flex;
    justify-content: center;
    align-items: center;
    background: url(./image/background2.jpg);
    background-size: cover;
    background-position: left;
    background-attachment: fixed;
}
</style>